<template>
  <div class="container">
    <!-- 首页顶部搜索 -->
    <search></search>
    <!-- 首页轮播图 (还可以实现tab的左右切换) -->
    <div class="slider">
      <swiper indicator-dots autoplay vertical circular :interval="2000">
        <!-- block非语义化标签 -->
        <swiper-item v-for="(item, key) in imgUrls" :key="key">
          <img :src="item.image_src" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </div>

    <!-- 首页分类列表 -->
    <div class="categorys">
      <div class="category" v-for="(item, key) in categorys" :key="key">
        <navigator :url="item.navigator_url" :open-type="item.open_type">
          <img :src="item.image_src" mode="aspectFill">
        </navigator>
      </div>
    </div>
    <!-- 楼层列表 -->
    <div class="floor" v-for="(item,index) in floors" :key="index">
      <!-- 楼层头部 -->
      <div class="floor-title">
        <img src="https://img30.360buyimg.com/jshopm/s130x45_jfs/t9649/116/1930769456/9107/e0022507/59e8a2f5N80c447de.jpg!q90" mode="aspectFill">
      </div>
      <div class="floor-content">
        <!-- 左侧大图 -->
        <div class="floor-left">
          <img :src="item.product_list[0].image_src" mode="aspectFill"/>
        </div>
        <!-- 右侧四张小图 -->
        <div class="floor-right">
          <img 
          v-for="(product,key) in item.product_list" :key="key"
          v-if="key!=0"
          :src="product.image_src" mode="aspectFill"/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import request from "../../utils/request.js"
import urlAddMain from "../../utils/index.js"
// import {urlAddMain} from "../../utils/index.js"
import Search from "../../components/search"
  export default {
    components: {
      Search
    },
    data() {
      return {
        imgUrls: [],
        categorys: [],
        floors:[]
      };
    },
    mounted() {
      this.getData()
    },
    methods: {
      // 负责请求数据
       async getData(){
        // // 捕获错误信息，不会中断错误
        // try{

        // }catch(err){
        //   console.log(err);
        // }
        // 同步请求
        const res = await request(
        "https://itjustfun.cn/api/public/v1/home/swiperdata","GET")
        // console.log(res);
        this.imgUrls = res.data.data;
        const categorys = await request("https://itjustfun.cn/api/public/v1/home/catitems","GET");
        const menus = categorys.data.data;
          // 重置下每项的navigator_url
          const newMenus = menus.map(item => {
            // 每项下面的链接
            let url = item.navigator_url;
            // 修改 navigator_url
            item.navigator_url = urlAddMain(url);
            return item;
          });
          // 把值赋给data的categorys
          this.categorys = newMenus;

          // 请求楼层数据
          const floors = await request("https://zhengzhicheng.cn/api/public/v1/home/floordata")
          this.floors = floors.data.message
          // console.log(this.floors);

      }
    }
  }
</script>

<style scoped lang="scss">
  @import "style.scss";
</style>


